<template>
	<view>
		<u-popup :show="show" mode="bottom" @close="show = false" round="24rpx">
			<view class="popup">
				<view class="flex-between popup-tlt-wrap">
					<view class="popup-tlt">{{ title }}</view>
					<u-icon name="close" color="#000" size="44rpx" @click="show = false"></u-icon>
				</view>
				<scroll-view scroll-y="true" class="richbox" style="max-height: 60vh">
					<view
						v-for="(item, idx) in options"
						:key="item.value"
						@click="cellClick(idx)"
						class="info"
						:class="{ checked: current === idx }"
					>
						<text>{{ item.name }}</text>
						<u-icon name="checkbox-mark" color="#1E74F3" v-if="current === idx"></u-icon>
					</view>
				</scroll-view>
				<view class="footer">
					<button class="footer-btn footer-btn-green" @click="show = false">取消</button>
					<button class="footer-btn" @click="onSureOrder">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			show: false,
			current: 0
		}
	},
	props: {
		title: {
			type: String,
			default: ''
		},
		options: {
			type: Array,
			default() {
				return []
			}
		}
	},
	methods: {
		open(check) {
			this.current = this.options.findIndex((obj) => obj.name === check)
			this.show = true
		},
		cellClick(index) {
			this.current = index
		},
		onSureOrder() {
			this.$emit('confirm', this.options[this.current])
			this.show = false
		}
	}
}
</script>
<style lang="scss">
.content {
	display: block;
	font-size: 26rpx;
	line-height: 42rpx;
	padding: 24rpx 40rpx;
	color: #333;
	text-align: justify;
	background-color: #fff;
}
.popup {
	padding: 32rpx 0 120rpx 0;
	&-tlt {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		&-wrap {
			padding: 0 32rpx;
		}
	}
}
.footer {
	width: 100%;
	height: 120rpx;
	border-top: 1px solid #e5e5e5;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	&-btn {
		width: 332rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1e74f3;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #fff;
		margin: 0;
		&-green {
			background-color: #eff2f3;
			margin-right: 22rpx;
			color: #222;
		}
	}
}
.richbox {
	padding: 24rpx 0;
}
.info {
	padding: 24rpx 32rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
}
.checked {
	background-color: #e8f1fd;
	color: #1e74f3;
}
button::after {
	border: 0 none;
}
</style>
